<template>
  <div class="res_box">
    <div class="book-search">
      <div v-if="!datails">
        <img class="yes-icon" src="@/assets/imgs/no.png" alt />
        <div class="title-top">查询失败</div>
        <span class="cont"
          >未查询到您输入的姓名和证书编号请检查输入是否正确</span
        >
      </div>
      <div v-else>
        <img class="yes-icon" src="@/assets/imgs/yes.png" alt />
        <div class="title-top">您查询的获奖情况属实</div>
        <div class="data-box">
          <div class="data-list">
            <span class="name-title">姓 名:</span>
            <span class="name">{{ datails.licensee }}</span>
          </div>
          <div class="data-list">
            <span class="name-title">证书编号:</span>
            <span class="name">{{ datails.number }}</span>
          </div>
          <div class="data-list">
            <span class="name-title">证书名称:</span>
            <span class="name">{{ datails.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { findCertificate } from "@/utils/apis/home";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "Worklist",
  components: {},
  props: {},
  setup() {
    const state = reactive({
      details: {},
    });
    const route = useRoute();
    const { licensee, number } = route.query;
    onMounted(async () => {
      try {
        const res = await findCertificate({
          licensee: licensee,
          number: number,
        });
        state.details = res.data;
      } catch (error) {
        console.log(error);
      }
    });
    return { ...toRefs(state) };
  },
});
</script>
<style lang="scss" scoped>
.res_box {
  padding: 30px 20px;
  .book-search {
    text-align: center;
    height: 100%;
    width: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
    .cont {
      font-size: 16px;
      color: #333;
      max-width: 254px;
      width: 254px;
      margin: 0 auto;
      display: block;
    }
    .data-box {
      text-align: left;
      width: 274px;
      margin: 0 auto;
      .data-list {
        margin-bottom: 10px;
      }

      .name-title {
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-right: 8px;
      }
      .name {
        color: #2a2a2a;
        font-size: 16px;
      }
    }
    .yes-icon {
      margin: 0 auto;
      margin-top: 46px;
      margin-bottom: 20px;
      width: 65px;
      height: 65px;
    }
    .title-top {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }
}
</style>
